<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
    全局组件与局部组件的区别
    (1)全局组件是属于所有vue实例的，因此可以在所有vue实例中使用
    例如: let vm1=new Vue({el:"#app1")、let vm2=new Vue({el:"#app2")
    id为app1的和id为app2的元素都可以使用全局组件<counter></counter>
    (2)
  -->
</head>
<body>
<div id="app">
  <h1>组件化编程-局部组件</h1>
  <!--使用局部组件-->
  <my_counter></my_counter>
  <my_counter></my_counter>
  <my_counter></my_counter>
</div>

<div id="app2">
  <h1>组件化编程-局部组件</h1>
  <!--使用局部组件-->
  <my_counter></my_counter>
  <my_counter></my_counter>
  <my_counter></my_counter>
</div>
<script src="vue.js"></script>
<script>
  <!--局部组件-->
  //扩展
  //1.可以把常用的组件，定义在某个common.js中 export
  //2.如果某个页面需要，直接import
  const buttonCounter={
    template:`<button v-on:click="click()">点击次数={{count}}次 【局部组件化】</button>`,
    // 数据池中的数据使用函数/方法返回，目的是为了保证每个组件的数据是独立的
    data(){
      return {
        count:10
      }
    },
    methods:{
      click(){
        this.count++
      }
    }
  }
  //创建Vue实例，必须有
  let vm=new Vue({
    el:"#app",
    components:{ //引入某个组件，它的使用范围只在这个Vue中
      "my_counter":buttonCounter
    }
  })

  let vm2=new Vue({
    el:"#app2",
    components:{ //引入某个组件，它的使用范围只在这个Vue中
      "my_counter":buttonCounter
    }
  })
</script>
</body>
</html>